<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <div th:include="includeJs::bootstrap_js"></div>

</head>

<body>
  <div class="container-scroller d-flex">
    <div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
      <div class="content-wrapper d-flex align-items-center auth px-0">
        <div class="row w-100 mx-0">
          <div class="col-lg-4 mx-auto">
            <div class="auth-form-light text-left py-5 px-4 px-sm-5">
              <div class="brand-logo">
                <img th:src="@{/img/new-logo.png}" alt="logo">
              </div>
              <h4>叮叮金融后台管理系统</h4>
              <h6 style="color: red" th:text="${msg}" id="msg" class="font-weight-light"></h6>
              <form onsubmit="return jiaoyan()"  class="pt-3" th:action="@{/admin/toLogin}" method="post">
                <div class="form-group">
                  <input th:value="${#session?.getAttribute('backUser')==null?'':#session?.getAttribute('backUser')}" type="text" class="form-control form-control-lg" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="请输入密码">
                </div>
                <div id="img" class="form-group">
                  <input type="hidden" name="keycode" :value="validkey"/>
                  <a href="javascript:;" @click="changeCodeImg()">
                    <img :src="codeImg" title="点击刷新验证码" alt="验证码加载中" />
                  </a>
                </div>
                <div class="form-group">
                  <input autocomplete="off" type="text" class="form-control form-control-lg" id="valid"  name="valid" placeholder="请输入验证码">
                </div>
                <div class="mt-3">
                  <input type="submit" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" value="登录"/>
                </div>
                <div class="my-2 d-flex justify-content-between align-items-center">
                  <div class="form-check">
                    <label class="form-check-label text-muted">
                      <input type="checkbox" name="remember-me" class="form-check-input">
						记住我
                    </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>

  function jiaoyan() {
    let username = $("#username").val();
    let password = $("#password").val();
    let valid = $("#valid").val();
    if(username.replace(/\s+/g,"")==""){
      $("#msg").text('请输入用户名!');
      $("#username").focus();
      return false;
    }

    if(password.replace(/\s+/g,"")==""){
      $("#msg").text('请输入密码!');
      $("#password").focus();
      return false;
    }

    if(valid.replace(/\s+/g,"")==""){
      $("#msg").text('请输入验证码!');
      $("#valid").focus();
      return false;
    }

    return true;
  }

  new Vue({
    el: "#img",//绑定的元素
    data: function () {
      return {
        validkey:null,
        codeImg: null
      }
    },
    mounted() {//组件初始化调用此方法
      axios.get('/code/getImgCode').then(response =>{
        this.codeImg=response.data.data;
        this.validkey=response.data.imgCodeKey;
      })
    },
    methods:{//方法必须绑定在vue的Methods对象中，v-on事件
      changeCodeImg:function () {
        axios.get('/code/getImgCode').then(response => {
          this.codeImg=response.data.data;
          this.validkey=response.data.imgCodeKey;
        })
      }
    }
  });
</script>
</html>
